<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="讨论" name="first">
      <div >
        <div>
          <div class="flow-item" v-for="item in discussion_list" >
            <div  class="flow-head">
              <img class="head-icon" src="/static/images/w_讨论.png" alt="">
              <div>{{item._user_label}}</div>
              <div class="create-time">{{item.createtime}}</div>
            </div>
            <div>
              <div>{{item.content}}</div>
            </div>
          </div>
        </div>
        <div v-if="discussion_list.length == 0">
          暂无讨论
        </div>
<!--        <textarea name="" id="" cols="30" rows="10" v-model="discussion_msg"></textarea>-->
        <div class="send-message">
          <el-input
              type="text"
              placeholder="请输入讨论内容"
              v-model="discussion_msg"
          >
<!--            maxlength="30"-->
<!--            show-word-limit-->
          </el-input>
          <el-button type="success" @click="send_discussion()">发送</el-button>
<!--          <button @click="send_discussion()">发送</button>-->
        </div>

      </div>

    </el-tab-pane>
    <el-tab-pane label="流转日志" name="second">
      <div>
        <div class="flow-item" v-for="item in flow_list">

          <div class="flow-head">
            <img class="head-icon" src="/static/images/文件-日志.png" alt="">
            <div>{{item._user_label}}</div>
            <div class="middle-assgin">指派事件</div>
            <div>{{item._target_label}}</div>
            <div class="create-time">{{item.createtime}}</div>
          </div>
          <div>
            {{item.memo}}
          </div>


        </div>
        <div v-if="flow_list.length ==0">
          暂无流转日志
        </div>
      </div>
    </el-tab-pane>


  </el-tabs>
</template>
<script>
export default {
  props:{
      qualityEventId:{}
  },
  data() {
    return {
      activeName: 'first',
      discussion_msg:'',
      discussion_list:[],
      flow_list:[]
    };
  },
  mounted(){
    this.get_discussion()
  },
  watch:{
    activeName(nv){
      if(nv=='first'){
        this.get_discussion()
      }else{
        this.get_flow_log()
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async send_discussion(){
      var msg = this.discussion_msg.trim()
      if(msg ==''){
        cfg.toast('请输入内容。')
      }else{
        var row = {
          _director_name:'user-discussion',
          content:msg,
          event:this.qualityEventId,
        }
        cfg.show_load()
        await ex.director_call('d.save_row',{row:row})
        this.discussion_msg=''
        await this.get_discussion()
        cfg.hide_load()
      }

    },
    async get_discussion(){
      // ex.director_call("/fdapi/")

      var resp = await  ex.get(`/dapi/user-discussion-list?event=${this.qualityEventId}`)
      this.discussion_list = resp.data.rows
    },
    async get_flow_log(){

      var resp = await  ex.get(`/dapi/flow/list?event=${this.qualityEventId}`)
      this.flow_list = resp.data.rows
    }
  }
};
</script>

<style scoped lang="scss">
//.gray-pad{
//  background-color: #f3f2f2;
//}
.flow-item{
  //border-top: 1px solid #c7c5c5;
  margin: 5px 20px 20px 20px;
  padding: 10px 30px;
}
.flow-head{
  display: flex;
  border-bottom: 1px solid #efeeee;
  margin: 30px 10px 0 0;
  position: relative;
  .head-icon{
    position: absolute;
    left: -40px;
    width: 30px;
  }
}
.middle-assgin{
  color: #b7b6b6;
  margin: 0 20px;
}
.create-time{
  font-size: 80%;
  color: gray;
  position: absolute;
  right: 20px;
}
.send-message{
  max-width: 700px;
  margin: 60px auto;
  display: flex;
}
</style>